<template>
    <div class="container" 
        element-loading-text="拼命加载中"
        element-loading-color="#fff"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        v-loading="loading">
         <div class="logo"></div>
         <div class="title">
            <div class="left">
                <div class="t1">气体检测</div>
                <div class="t2">实时数据</div>
            </div>
            <div class="right">
                    <!-- <div v-for="item,index in times" class="time" :key="index">
                        {{item}}
                    </div> -->
                <div class="time-box">
                    <div class="time">{{ times[0] }}</div>
                    <div class="poit"></div>
                    <div class="time">{{ times[1] }}</div>
                    <div class="poit"></div>
                    <div class="time">{{ times[2] }}</div>
                </div>
                <div class="date">
                    <div>{{ month }}/{{ day }}</div>
                    <div class="year">{{ year }}</div>
                </div>
            </div>
         </div>

         <div class="card">
            <div class="top">
                <div class="left">
                    <div class="icon">
                        <img  src="../assets/otto/icon-o2.png"/>
                    </div>
                    <div class="type">氧气</div>
                </div>
                <div class="right">
                    报警值： <span>{{ o2v1 }}%</span>
                </div>
            </div>
            <div class="center">
                <div class="left">
                    <img src="../assets/otto/jiantou.png" />
                </div>
                <div class="right">
                    <div class="current">
                        {{ o2current }}%
                    </div>
                    <div class="text">
                        当前气体数据
                    </div>
                </div>
            </div>
            <div class="bottom">
                氧气(低于{{ o2limit }}%禁止入库操作)
            </div>
         </div>

         <div class="card">
            <div class="top">
                <div class="left">
                    <div class="icon">
                        <img  src="../assets/otto/icon-s.png"/>
                    </div>
                    <div class="type">磷化氢</div>
                </div>
                <div class="right">
                    报警值： <span>{{ lhqv1 }}%</span>
                </div>
            </div>
            <div class="center">
                <div class="left">
                    <img src="../assets/otto/jiantou.png" />
                </div>
                <div class="right">
                    <div class="current">
                        {{ lhqcurrent }}%
                    </div>
                    <div class="text">
                        当前气体数据
                    </div>
                </div>
            </div>
            <div class="bottom">
                有毒气体(高于{{ lhqlimit }}%禁止入库操作)
            </div>
         </div>
    </div>
</template>

<script>
import $ from 'jquery';
export default {
    data() {
        return {
            o2v1: 19.5,
            o2current: '0.00',
            o2limit: 19.5,
            lhqv1: 0.2,
            lhqcurrent: '0.00',
            lhqlimit: 0.2,
            url: 'http://sinograin.otto.xin',
            // url: 'http://10.100.51.71:7005',
            loading: false,
            times: [],
            year: 2024,
            month: 7,
            day: 16,
            deptId: null,
        }
    },
    beforeMount() {
        this.deptId = this.$route.query.deptId;
        // 获取气体数据
        this.laodData()
    },
    mounted() {
        setInterval(()=>{
            this.laodData()
        }, 1000 * 60)
        setInterval(this.initTime, 1000)
    },
    methods: {
        laodData() {
            let that  = this;
            this.loading = true;
            $.ajax({
                url: this.url + `/gas/ghtmlTwo/${this.deptId}`,
                data:{
                    
                },
                type: "get",
                dataType: "json",
                async: true,
                success(res) {
                    const {code, data} = res;
                    if(code==0) {
                        that.o2current = data.data;
                        that.lhqcurrent = data.lhqData == 0 ? '0.00' : data.lhqData;
                        that.loading  = false;
                        let flag = data.flag;
                        if(flag===400) {
                            that.$message.warning(data.msg)
                        } else if(flag===500) {
                            that.$message.error(data.msg)
                        }

                    }
                }
            })
        },
        initTime() {
            this.times = []
            let current = []
            let timeString = new Date().toLocaleTimeString();
            timeString.split(':').forEach(item=>{
                current.push(item+"")    
            })
            this.times = current;
            let date = new Date()
            this.year = date.getFullYear()
            this.month = date.getMonth() + 1;
            this.day = date.getDate();
        },
    }
}
</script>



<style scoped>
/deep/ .el-icon-loading:before {
    content: "\E6CF";
    color: #fff;
    font-size: 24px;
}
/deep/ .el-loading-spinner .el-loading-text {
    color: #fff;
    margin: 3px 0;
    font-size: 20px;
}


* {
    box-sizing: border-box;
}
.container {
    height: 100vh;
    width: 100%;
    background: url('../assets/otto/back.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    height: 22px;
    width: 116px;
    background: url('../assets/otto/logo.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    margin-top: 25px;
}

.title {
    width: 100%;
    margin-top: 20px;
    color: #003D79;
    font-size: 27px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    padding: 0 18px;
    align-items: end;
}
.title .t1 {
    /* margin-left: 5%; */
}
.title .t2 {
    padding-left: 26px;
    margin-top: 10px;
}


/* 时间 */
.title .right {
    width:  150px;
    height: 50px;
    background: url('../assets/otto/date-box.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 0 0;
}

.title .right .time-box {
    width: 120px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 5px 0 10px;
}

.title .right .time-box .poit {
    height: 70%;
    width: 5px;
    background: url('../assets/otto/time.png') no-repeat 0px 0px;
    background-size: 100% 100%;
    margin-bottom: 10px;
}
.title .right .time-box .time {
    font-size: 18px;
    font-weight: bold;
    text-align:center;
    color: #004F9D;
}

.date {
    min-width: 30px;
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-weight: 900;
    text-align:center;
}

.date .year {
    color: white;
    background-color: #0063C5;
    border-radius: 3px;
    padding: 2px;
    
}


.card {
    width: 90%;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-top: 10px;
}

.card .top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 10px;
}
.card .icon img {
    height: 20px;
    width: 20px;
    margin-right: 8px;
}
/* .card .icon img {
    height: 100%;
    width: 100%;
} */
.card .top .left {
    display: flex;
    align-items: center;
    vertical-align: middle;
}

.card .top .right {
    color: #003D79;
    font-size: 16px;
    font-weight: 600;
}

.card .top .right span {
    color: #F35B5B;
}

.card .center {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.card .center .left img{
    width: 125px;
    height: 74p;
}

.card .center .right {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
}

.card .center .right .current {
    font-size: 30px;
    font-weight: 600;
    color: #003D79;
}
.card .center .right .text {
    font-size: 14px;
    color: #003D79;
}

.card .bottom {
    background-color: #f3d4d4;
    color: #F35B5B;
    border-radius: 4px;
    padding: 3px 10px;
    text-align: center;
    font-size: 14px;

}





</style>